import React, { useEffect, useState } from 'react'
import { Button, Card, Toast, NavBar, List, IndexBar, Tag } from 'antd-mobile'
import styles from './index.module.css'
import request from '../../api/request'
import { useNavigate, useParams } from 'react-router-dom'
import { useSelector, useDispatch } from 'react-redux'
import { citydj } from '../../store/cityles'

function City() {
  let navgetipn = useNavigate()
  let [list, setList] = useState([])
  let [hoslist, setHoslist] = useState([])
  const dispatch = useDispatch()
  const { type } = useParams()
  const getlist = async () => {
    let res = await request.get('/api/city')
    console.log(res);
    const { code, data } = res.data
    if (code == 200) {
      setList(data.city)
      setHoslist(data.hotCities)
    }
  }


  useEffect(() => {
    getlist()
  }, [])

  const citysjhx=(city)=>{
    dispatch(citydj({type,city}))
    navgetipn('/')
  }

  return (
    <div>
    {/* 返回上级 */}
      <NavBar onBack={() => navgetipn(-1)}>标题</NavBar>

{/* 热门城市 */}
      <Card title='热门城市'>

        <div className={styles.carlist}>
          {
            hoslist.length > 0 && hoslist.map((item, index) => {
              return <Tag key={index} onClick={() => citysjhx(item.name)}>{item.name}</Tag>
            })
          }
        </div>

      </Card>
{/* 热门城市和城市列表的渲染 */}
      <Card title='城市列表'>
        <div style={{ height: window.innerHeight }}>
          <IndexBar>
            {list.length > 0 && list.map(item => {
              {/* const { title, items } = group */ }
              return (
                <IndexBar.Panel
                  index={item.initial}
                  title={`${item.initial}`}
                  key={`${item.initial}`}
                >
                  <List>
                    {item.list.map((item, index) => (
                      <List.Item key={index} onClick={() => citysjhx(item.name)}>{item.name}</List.Item>
                    ))}
                  </List>
                </IndexBar.Panel>
              )
            })}
          </IndexBar>
        </div>
      </Card>
    </div>
  )
}

export default City
